<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ count }}</h2>
    <button @click="addCount($event,2)">+ {{ count }}</button>
    <p>用户名：{{ username }}</p>
    <p>年龄：{{ age }}</p>
    <p><input type="text" v-model="username"></p>
    <p><input type="text" v-model.number="age"></p>
    <p>
      <button @click="flag=!flag">条件渲染指令按钮</button>
    </p>
    <p v-if="flag">请求成功，v-if</p>
    <p v-show="flag">请求成功，v-if</p>
    <p>{{ message | cap }}</p>

    <ul v-for="(item,index) in newsList" :key="item.id" v-if="newsList">
      <li>
        {{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      count: 1,
      username: '',
      age: '',
      flag: true,
      info: 'aaaa',
      message: 'bbb',
      newsList: []
    }
  },
  filters: {
    cap (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    addCount (e, step) {
      const nowBgColor = e.target.style.backgroundColor
      e.target.style.backgroundColor = nowBgColor == 'red' ? '' : 'red'
      this.count += step
    },
    async getUserList () {
      const { data: res } = await this.$http.get('/xcxindexnews2')
      this.newsList = res
      console.log(this.newsList)
    },



  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
